<template>
  <div class="dv-device-data">
    <div class="dv-device-data__number">
      <div class="dv-device-data__number__row">
        <div class="dv-device-data__number__item">
          <div class="dv-device-data__number__icon">
            <img src="~@/assets/dataView/images/device_icon1.png" alt="">
          </div>
          <div class="dv-device-data__number__text">
            <div class="dv-device-data__number__title">区域</div>
            <div class="dv-device-data__number__num">一车间</div>
          </div>
        </div>
        <div class="dv-device-data__number__item">
          <div class="dv-device-data__number__icon">
            <img src="~@/assets/dataView/images/device_icon1.png" alt="">
          </div>
          <div class="dv-device-data__number__text">
            <div class="dv-device-data__number__title">状态</div>
            <div class="dv-device-data__number__num">一车间</div>
          </div>
        </div>
        <div class="dv-device-data__number__item">
          <div class="dv-device-data__number__icon">
            <img src="~@/assets/dataView/images/device_icon1.png" alt="">
          </div>
          <div class="dv-device-data__number__text">
            <div class="dv-device-data__number__title">名称</div>
            <div class="dv-device-data__number__num">一车间</div>
          </div>
        </div>
      </div>
      <div class="dv-device-data__number__row">
        <div class="dv-device-data__number__item">
          <div class="dv-device-data__number__icon">
            <img src="~@/assets/dataView/images/device_icon1.png" alt="">
          </div>
          <div class="dv-device-data__number__text">
            <div class="dv-device-data__number__title">ID</div>
            <div class="dv-device-data__number__num">一车间</div>
          </div>
        </div>
        <div class="dv-device-data__number__item">
          <div class="dv-device-data__number__icon">
            <img src="~@/assets/dataView/images/device_icon1.png" alt="">
          </div>
          <div class="dv-device-data__number__text">
            <div class="dv-device-data__number__title">电压</div>
            <div class="dv-device-data__number__num">一车间</div>
          </div>
        </div>
        <div class="dv-device-data__number__item"></div>
      </div>
    </div>
    <div class="dv-device-data__temperature">
      <div class="dv-device-data__temperature__img">
        <img src="~@/assets/dataView/images/device_img.png" alt="">
      </div>
      <div class="dv-device-data__temperature__number__box">
        <div class="dv-device-data__temperature__icon">
          <img src="~@/assets/dataView/images/device_temperature_icon.png" alt="">
        </div>
        <div class="dv-device-data__temperature__number">
          <div class="dv-device-data__temperature__number__item">
            <div class="dv-device-data__temperature__number_title"></div>
            <div class="dv-device-data__temperature__number_num"></div>
          </div>
          <div class="dv-device-data__temperature__number__item">
            <div class="dv-device-data__temperature__number__title">通道1</div>
            <div class="dv-device-data__temperature__number__num">10℃</div>
          </div>
          <div class="dv-device-data__temperature__number__item">
            <div class="dv-device-data__temperature__number__title">通道2</div>
            <div class="dv-device-data__temperature__number__num">5摄氏度</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataViewDeviceData'
}
</script>

<style scoped lang="scss">
.dv-device-data {
  width: 28vw;
  height: 26vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(54,204,255,0.7);

  .dv-device-data__number {
    flex: 3;
    display: flex;
    flex-direction: column;

    .dv-device-data__number__row {
      flex: 1;
      display: flex;
      margin-bottom: 1vw;
      align-items: center;

      .dv-device-data__number__item {
        flex: 1;
        display: flex;

        .dv-device-data__number__icon {
          margin-right: .5vw;
          img {
            width: 2.9vw;
            height: 3.1vw;
          }
        }

        .dv-device-data__number__text {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: .1vw 0;

          .dv-device-data__number__title {
            //background: url("~@/assets/dataView/images/device_title_bg.png") no-repeat;
            height: 1vw;
            color: white;
            font-size: .7vw;
            margin-bottom: .2vw;
          }

          .dv-device-data__number__num {
            color: white;
            flex: 1;
            font-size: .9vw;
          }

        }
      }
    }
  }

  .dv-device-data__temperature {
    margin-bottom: 1vw;
    height: 4.2vw;
    display: flex;

    .dv-device-data__temperature__img {
      margin-right: .7vw;
      background: rgba(0,125,255,0.1);
      border: 1px solid rgba(54,204,255,0.7);
       img {
         width: 4vw;
         height: 4vw;
       }
    }

    .dv-device-data__temperature__number__box {
      flex: 1;
      background: url("~@/assets/dataView/images/device_temperature_number_bg.png") no-repeat;
      background-size: 100% auto;
      display: flex;
      .dv-device-data__temperature__icon {
        display: flex;
        align-items: center;
        img {
          margin-left: 1vw;
          height: 3vw;
          width: 3vw;
        }
      }

      .dv-device-data__temperature__number {
        flex: 1;
        display: flex;
        align-items: center;
        .dv-device-data__temperature__number__item {
          height: 3vw;
          flex: 1;
          .dv-device-data__temperature__number__title {
            font-size: .7vw;
            color: white;
            margin-bottom: .2vw;
          }

          .dv-device-data__temperature__number__num {
            color: white;
            font-size: .9vw;
          }

        }
      }
    }
  }
}
</style>
